<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: index-header('我的主页')" />
    <style>
        #task_list li:hover{
            background-color: #f5f5f5;
        }
        #article_list li:hover{
            background-color: #f5f5f5;
        }


        /*清楚浮动*/
        .clearfix:after {
            content: '';
            display: block;
            clear: both;
        }

        /*显示不全用...表示*/
        .ellipsis {
            width: 350px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            display: inline-block;
        }
        .ellipsis-summary {
            width: 550px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            display: inline-block;
        }
        /*溢出二行...表示*/
        .ellipsis-2{
            display: -webkit-box;
            overflow: hidden;
            white-space: normal !important;
            text-overflow: ellipsis;
            word-wrap: break-word;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical
        }
    </style>
</head>

<body class="gray-bg" style="background-color: #F2F2F2">
    <!--导航栏-->
    <div th:replace="include :: headNav"></div>

    <input id="userId" name="userId" type="hidden" th:value="${user.userId}" />

    <div class="text-center" style="padding: 78px 78px 30px 78px;width: 100%;height: auto;background-color: white">
        <div class="text-center">
            <p ><img class=" img-lg" style="border-radius: 100%;" th:src="(${#strings.isEmpty(user.avatar)}) ? @{/img/river.png} : @{${user.avatar}}" th:onerror="'this.src=\'' + @{'/img/river.png'} + '\''"></p>
        </div>
        <div>
            <span class="text-center" style="font-size: 14px;color: #999;">[[${#strings.defaultString(user.userName, '-')}]]</span> <i style="height: 16px;line-height: 16px;padding: 0 3px;background-color: #FF5722;color: #fff;border-radius: 2px;" th:text="${'LV'+user.grade}">LV1</i>
        </div>
        <div style="color: #5FB878;margin-top: 10px">
            <span>个人标签：</span>
            <span style="margin-right: 10px" th:text="${user.personalLabel}">java</span>
<!--            <span>后端开发 </span>-->
        </div>
        <div style="height: 30px;margin-top: 10px">
            <span style="display: inline-block; height: 100%;">
                 <i class="glyphicon glyphicon-time" style="font-weight: 100;color: #afacac;font-size: 15px;position: relative;top: 3px"></i>
            </span>
            <span style="color: #999;font-size: 14px">
                <span >[[${#dates.format(user.createTime, 'yyyy-MM-dd')}]]</span> <span>加入</span>
            </span>
        </div>
        <div style="color: #999;">
            <span>个人简介：</span>
            <span th:text="${user.resume}">该用户太懒了，还没来得及填写</span>
        </div>
        <!--<div class="fly-sns" data-user="">
            <a href="javascript:;" class="btn btn-w-m btn-white" data-type="addFriend">加为好友</a>
            <a href="javascript:;" class="btn btn-w-m btn-primary" data-type="chat">发起会话</a>
        </div>-->
    </div>

    <div style="margin-top: 40px;padding-left: 30px;padding-right: 30px;" >
        <div class="row">
            <div class="col-sm-8" >
                <div class="panel blank-panel">

                    <div class="panel-heading">
                        <div class="panel-options">

                            <ul class="nav nav-tabs">
                                <li class="active"><a data-toggle="tab" href="#tab-4">任务</a>
                                </li>
                                <li class=""><a data-toggle="tab" href="#tab-5">贴子</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="panel-body">
                        <div class="tab-content">
                            <!--我的任务-->
                            <div id="tab-4" class="tab-pane active">
                                <!--分页内容-->
                                <ul id="task_list" >

                                </ul>
                            </div>
                            <!--我的文章-->
                            <div id="tab-5" class="tab-pane">
                                <!--分页内容-->
                                <ul id="article_list">

                                </ul>
                            </div>
                        </div>

                    </div>

                </div>
            </div>
            <div class="col-sm-4">
                <div class="layui-card">
                    <div class="layui-card-header">最新评论</div>
                    <div class="layui-card-body">
                        <!--分页内容-->
                        <ul id="comment_list">

                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div th:replace="include :: footer-nav-index"></div>
    <!--回到顶部图标-->
    <div class="move-top" title="回到顶部"></div>

    <th:block th:include="include :: footer-index" />
    <script th:src="@{/js/index/index.js}"></script>
    <script th:inline="javascript">
        layui.use('flow', function(){
            var flow = layui.flow;
            var user = [[${user}]]
            var selfUser = [[${selfUser}]]
            var userId = null
            if (user!=null){
                userId = user.userId
            }
            var util = layui.util;
            //在用户没有登录时，为null
            //任务分页
            flow.load({
                elem: '#task_list' //指定列表容器
                ,done: function(page, next){ //到达临界点（默认滚动触发），触发下一页
                    var lis = [];
                    //以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
                    var url = "/taskcenter/taskcenter/user/list";
                    var data={
                        pageSize: 5,
                        pageNum: page,
                        isAsc: 'desc',
                        orderByColumn:'createTime',
                        userId:userId
                        // isDesc:'desc'
                    }
                    var config = {
                        url: url,
                        type: "post",
                        dataType: "json",
                        data: data,
                        beforeSend: function () {

                        },
                        success: function(result) {
                            if (result.code===0){
                                //假设你的列表返回在data集合中
                                layui.each(result.rows, function(index, item){
                                    //是本人
                                    var status = '进行中';
                                    if (item.status=='1'){
                                        status = '匹配中'
                                    }else if (item.status=='2'){
                                        status = '匹配成功'
                                    } else if (item.status=='3'){
                                        status = '进行中'
                                    } else if (item.status=='4'){
                                        status = '待评分'
                                    }else if (item.status=='5'){
                                        status = '已结束'
                                    }else {

                                    }
                                    if (selfUser!=null&&selfUser.userId==userId){
                                        lis.push('<li style="border-bottom: 1px  solid #eee;padding: 15px 0 15px 0;">\n' +
                                            '    <a href="javascripts:;" onclick="goTaskDetail('+item.id+')" class="clearfix" >\n' +
                                            '        <div>\n' +
                                            '            <div style="float: left;margin-right: 10px;height: 100px;overflow: hidden;">\n' +
                                            '                <img src="'+item.taskThumbnail+'" alt="" style="width:140px;">\n' +
                                            '            </div>\n' +
                                            '            <div style="float: left" >\n' +
                                            '                <div class="layui-row">\n' +
                                            '                    <h4 style="margin-bottom: 10px;font-size: 16px"><b class="ellipsis">'+item.taskTitle+'</b></h4>\n' +
                                            '                    <div style="color: #999999;margin-bottom: 5px;font-size: 14px" class="ellipsis-summary">'+item.taskSummary+'</div>\n' +
                                            '                    <div style="color: #676a6c;font-size: 12px;font-weight: 400">'+status+'</div>\n' +
                                            '                </div>\n' +
                                            '                <div class="layui-row" style="color: #999;font-size: 13px;margin-top: 10px">\n' +
                                            '                    <span>'+util.timeAgo(item.createTime)+'</span> 创建</span></span> <span>&nbsp;|&nbsp;</span><span><i class="fa fa-tags"></i>&nbsp;'+item.tag+'</span>\n' +
                                            '                </div>\n' +
                                            '            </div>\n' +
                                            '        </div>\n' +
                                            '    </a>\n' +
                                            '</li>')
                                    } else {
                                        lis.push('<li style="border-bottom: 1px  solid #eee;padding: 15px 0 15px 0">\n' +
                                            '    <a href="/taskcenter/taskcenter/detail/public/'+item.id+'" target="_blank" class="clearfix" >\n' +
                                            '        <div>\n' +
                                            '            <div style="float: left;margin-right: 10px;height: 100px;overflow: hidden;">\n' +
                                            '                <img src="'+item.taskThumbnail+'" alt="" style="width:140px;">\n' +
                                            '            </div>\n' +
                                            '            <div style="float: left" >\n' +
                                            '                <div class="layui-row">\n' +
                                            '                    <h4 style="margin-bottom: 10px;font-size: 16px"><b class="ellipsis">'+item.taskTitle+'</b></h4>\n' +
                                            '                    <div style="color: #999999;margin-bottom: 5px;font-size: 14px" class="ellipsis-summary">'+item.taskSummary+'</div>\n' +
                                            '                    <div style="color: #676a6c;font-size: 12px;font-weight: 400">'+status+'</div>\n' +
                                            '                </div>\n' +
                                            '                <div class="layui-row" style="color: #999;font-size: 13px;margin-top: 10px">\n' +
                                            '                    <span>'+util.timeAgo(item.createTime)+'</span> 创建</span></span> <span>&nbsp;|&nbsp;</span><span><i class="fa fa-tags"></i>&nbsp;'+item.tag+'</span>\n' +
                                            '                </div>\n' +
                                            '            </div>\n' +
                                            '        </div>\n' +
                                            '    </a>\n' +
                                            '</li>')
                                    }
                                });
                                //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                                //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                                next(lis.join(''), page < result.total/5);
                            }else {
                                layer.open({
                                    title: '系统提示'
                                    ,content: '加载失败，请稍后再试！！！'
                                    ,yes: function(){
                                        layer.closeAll();
                                    }
                                });
                            }
                        }
                    };
                    if (userId!=null){
                        $.ajax(config)
                    }
                }
            });

            //帖子分页
            flow.load({
                elem: '#article_list' //指定列表容器
                ,scrollElem: '#article_list'
                ,done: function(page, next){ //到达临界点（默认滚动触发），触发下一页
                    var lis = [];
                    //以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
                    var url = "/system/article/user/list";
                    var data={
                        pageSize: 10,
                        pageNum: page,
                        isAsc: 'desc',
                        orderByColumn:'articleNewstime',
                        // isDesc:'desc'
                        userId:userId
                    }
                    var config = {
                        url: url,
                        type: "post",
                        dataType: "json",
                        data: data,
                        beforeSend: function () {

                        },
                        success: function(result) {
                            if (result.code===0){
                                //假设你的列表返回在data集合中
                                layui.each(result.rows, function(index, item){
                                    lis.push('<li style="border-bottom: 1px  solid #eee;padding: 15px 0 15px 0;">\n' +
                                        '    <a href="/system/article/detail/'+item.id+'" target="_blank" class="clearfix" >\n' +
                                        '        <div>\n' +
                                        '            <div style="float: left;margin-right: 10px;height: 100px;overflow: hidden;">\n' +
                                        '                <img src="'+item.articleThumbnail+'" alt="" style="width:140px;">\n' +
                                        '            </div>\n' +
                                        '            <div style="float: left" >\n' +
                                        '                <div class="layui-row">\n' +
                                        '                    <h4 style="margin-bottom: 10px;font-size: 16px"><b class="ellipsis">'+item.articleTitle+'</b></h4>\n' +
                                        '                    <div style="color: #999999;margin-bottom: 5px;font-size: 14px" class="ellipsis-summary">'+item.articleSummary+'</div>\n' +
                                        '                    <div style="color: #676a6c;font-size: 12px;font-weight: 400">作者：'+item.articleAuthor+'&nbsp;&nbsp;编辑：'+item.articleEdit+'</div>\n' +
                                        '                </div>\n' +
                                        '                <div class="layui-row" style="color: #999;font-size: 13px;margin-top: 10px">\n' +
                                        '                    <span>'+util.timeAgo(item.articleNewstime)+'</span> 发布</span></span>\n' +
                                        '                </div>\n' +
                                        '            </div>\n' +
                                        '        </div>\n' +
                                        '    </a>\n' +
                                        '</li>')
                                });
                                //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                                //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                                next(lis.join(''), page < result.total/10);
                            }else {
                                layer.open({
                                    title: '系统提示'
                                    ,content: '加载失败，请稍后再试！！！'
                                    ,yes: function(){
                                        layer.closeAll();
                                    }
                                });
                            }
                        }
                    };
                    $.ajax(config)
                }
            });

            //评论
            flow.load({
                elem: '#comment_list' //指定列表容器
                ,done: function(page, next){ //到达临界点（默认滚动触发），触发下一页
                    var lis = [];
                    //以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
                    var url = "/system/comment/list";
                    var data={
                        pageSize: 10,
                        pageNum: page,
                        isAsc: 'desc',
                        orderByColumn:'commentTime',
                        // isDesc:'desc'
                        userId:userId
                    }
                    var config = {
                        url: url,
                        type: "post",
                        dataType: "json",
                        data: data,
                        beforeSend: function () {

                        },
                        success: function(result) {
                            console.log(result)
                            if (result.code===0){
                                //假设你的列表返回在data集合中
                                layui.each(result.rows, function(index, item){
                                    var timeAgoStr=util.timeAgo(new Date(item.commentTime))
                                    if (selfUser!=null&&selfUser.userId==item.userId){
                                        lis.push('<li style="height: 100px" >\n' +
                                            '    <div style="position: relative;">\n' +
                                            '       <span style="position: absolute;width: 35px;height: 35px">\n' +
                                            '             <img style="width: 100%;height: 100%;" src="'+item.userAvatar+'" alt="头像">\n' +
                                            '       </span>\n' +
                                            '       <span style="position: absolute;left: 45px;top: -3px">\n' +
                                            '           <div style="color: #CDCCCD;font-size: 14px;padding-bottom: 5px">'+item.userName+'&nbsp;&nbsp;'+timeAgoStr+'<a href="/system/article/detail/'+item.articleId+'" target="_blank" style="text-decoration:none;color: #01AAED;font-size: 14px">&nbsp;&nbsp;From</a></div>\n' +
                                            '           <div style="font-size: 15px;overflow: hidden;word-break:break-all;">'+item.comment+'</div>\n' +
                                            '       </span>\n' +
                                            '       <span class="comment-rm" onclick="deleteComment('+item.id+')"  id="commentId-'+item.id+'" style="position: absolute;right: 10px;top: -3px;color: #0D8BBD;font-size: 13px;cursor:pointer;">删除</span>\n' +
                                            '    </div>\n' +
                                            '</li>');
                                    }else {
                                        lis.push('<li style="height: 100px" >\n' +
                                            '    <div style="position: relative;">\n' +
                                            '       <span style="position: absolute;width: 35px;height: 35px">\n' +
                                            '             <img style="width: 100%;height: 100%;" src="'+item.userAvatar+'" alt="头像">\n' +
                                            '       </span>\n' +
                                            '       <span style="position: absolute;left: 45px;top: -3px">\n' +
                                            '           <div style="color: #CDCCCD;font-size: 14px;padding-bottom: 5px">'+item.userName+'&nbsp;&nbsp;'+timeAgoStr+'</div>\n' +
                                            '           <div style="font-size: 15px;overflow: hidden;word-break:break-all;">'+item.comment+'</div>\n' +
                                            '       </span>\n' +
                                            '    </div>\n' +
                                            '</li>');
                                    }
                                });
                                //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                                //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                                next(lis.join(''), page < result.total/10);
                            }else {
                                layer.open({
                                    title: '系统提示'
                                    ,content: '加载失败，请稍后再试！！！'
                                    ,yes: function(){
                                        layer.closeAll();
                                    }
                                });
                            }
                        }
                    };
                    $.ajax(config)
                }
            });
        });
        function deleteComment(id){
            layer.open({
                title: '系统提示'
                ,content: '是否删除评论'
                ,yes: function(){
                    var url = "/system/comment/remove";
                    var data={
                        ids:id
                    }
                    var config = {
                        url: url,
                        type: "post",
                        dataType: "json",
                        data: data,
                        beforeSend: function () {

                        },
                        success: function(result) {
                            if (result.code===0){
                                $('#commentId-'+id).parent().parent().hide()
                                layer.closeAll();
                            }else {
                                layer.open({
                                    title: '系统提示'
                                    ,content: '删除失败'
                                    ,yes: function(){
                                        layer.closeAll();
                                    }
                                });
                            }
                        }
                    };
                    $.ajax(config)
                }
            });
        }
        /* 任务详情*/
        function goTaskDetail(taskId) {
            var url = '/taskcenter/taskcenter/detail/'+taskId;
            top.layer.open({
                type : 2,
                title : '任务详情',
                anim : 2,
                area : [ '90%', '90%' ],
                maxmin : true,
                shadeClose: true,
                content : url
            })
        }
    </script>
</body>
</html>
